<template>
    <view :class="['r-header', defineClass]" :style="style">
        <!--title 容器-->
        <view class="box">
            <!--插槽-->
            <view class="icon">
                <!-- 有历史路由 展示 返回按钮 -->
                <view v-if="isPrevPage" @click.stop="onBack">
                    <slot name="back"></slot>
                </view>
                <!-- 没有历史路由 默认 logo插槽 -->
                <view v-else>
                    <slot name="logo"></slot>
                </view>
            </view>
            <!--title-->
            <view class="title">
                <slot name="title"></slot>
            </view>
            <!--占位-->
            <view class="icon"></view>
        </view>
    </view>
</template>

<script>
import computedHeader from './utils/computed-header.js'

export default {
    name: 'RHeader',
    props: {
        // header  padding-bottom
        paddingBottom: {
            type: Number | String,
            default: 0
        },
        // header define-class
        defineClass: {
            type: String,
            default: ''
        },
        // header isDefaultBack
        isDefaultBack: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        style() {
            const {top, height} = computedHeader()
            return `height: ${height}px; padding-top: ${top}px; padding-bottom: ${this.paddingBottom}px;`
        },
        // 是否展示返回按钮    根据   是否有历史路由
        isPrevPage() {
            let pages = getCurrentPages() // 获取栈实例

            // let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
            // let prevPage = pages[pages.length - 2] // 获取上个页面的数据，包含页面路由
            // console.log(prevPage)

            return pages[pages.length - 2]
        }
    },
    methods: {
        // 返回当前 header 整体高度
        getHeaderHeight() {
            const {top, height} = computedHeader()
            return `${parseFloat(height) + parseFloat(top) + parseFloat(this.paddingBottom)}px;`
        },
        // 返回
        onBack() {
            // console.log('返回');
            if (!this.isDefaultBack) return false;

            if (this.isPrevPage) {
                uni.navigateBack()
            }
        }
    }
}
</script>

<style>
@import "r-header.css";
</style>
